<template>
  <el-container style="  margin-left: 5px;">
    <el-row style="position: inherit;  margin-bottom: 5px;  margin-top: 10px;">
    </el-row>
    <el-container>
      <el-aside style=" margin-left: 10px;  min-width: 50%;  background: rgba(194,83,255,0);">
        <div style=" display: flex;   height: 100%;">
          <div
            style=" height: 100%;  width: 100%;  border-radius: 4px;  overflow-y: hidden;  overflow-x: hidden;  margin-left: -23px; display: inline-block;  ">
            <div>
              <div
                style="margin-top: 10px;  margin-bottom: 20px; ">
                <el-row :gutter="10">
                  <el-col :span="7.5">
                    <el-button type="primary" plain @click="open = true"
                               style=" margin-left: 3px;  margin-top: 9px;  min-width: 160px;  min-height: 80px;  font-size: 20px;  border: 3px solid #87CEFA;">
                      录入信息
                    </el-button>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" plain @click="clear()"
                               style=" margin-left: 3px;  margin-top: 9px;  min-width: 160px;  min-height: 80px;  font-size: 20px;  border: 3px solid #87CEFA;">
                      清空列表
                    </el-button>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3.5">
                    <div style="display: block;">
                      <span
                        style="display: block; margin-top: 22px;margin-left: 6px;  margin-bottom: 20px;  font-size: 20px;">员工：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="this.recordEmployeeNumber" :disabled="true"
                              style="width: 75px; height: 40px;margin-top: 22px; font-size: 20px;"></el-input>
                  </el-col>
                  <el-col :span="3.5">
                    <div style="display: block;">
                      <span style="display: block; margin-top: 22px;  font-size: 20px;">手牌号：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="this.handBrand " :disabled="true"
                              style="width: 75px; height: 40px;margin-top: 22px;  font-size: 20px;"></el-input>
                  </el-col>
                  <el-col :span="3.5">
                    <div style="display: block;margin-left: 1px;">
                      <span style="display: block; margin-top: 22px;font-size: 20px;">房间号：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="this.seat " :disabled="true"
                              style="width: 78px; height: 40px;;margin-top: 22px;font-size: 20px;"></el-input>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div style="height: 600px;  font-size: 25px;  margin-top: 10px;  margin-right: 13px;">
              <el-table :show-header="false" :data="projectList1" empty-text="玉泉宫" height="400"
                        style="margin-top: 1px;  overflow-y: hidden;  overflow-x: hidden;  position: inherit;  font-size: 18px;width: 1150px">
                <el-table-column prop="entryName" label="商品名称" align="center">
                </el-table-column>
                <el-table-column prop="unitPrice" label="商品名称" align="center">
                </el-table-column>
                <el-table-column prop="clockUpTime" label="商品名称" align="center">
                </el-table-column>
              </el-table>
            </div>
            <el-button
              style="margin-top: 100px;  margin-left:11px;  font-size: 25px;  width: 200px;  height: 100px;  border: 3px solid #87CEFA;"
              type="primary" plain @click.prevent.stop.native="sz()">上钟
            </el-button>
            <el-button
              style="margin-top: 100px;  margin-left:11px;  font-size: 25px;  width: 200px;  height: 100px;  border: 3px solid #87CEFA;"
              type="primary" plain @click.prevent.stop.native="back()">返回主页
            </el-button>
          </div>
          <div style="display: inline-block;   height: 400px;  width: 24%;">
            <div>
              <div style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                <el-card
                  style="margin-top: 30px;  margin-left: 5px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #ea0d0d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListam()">
                  <span style="   line-height:80px;  font-size: 22px;">按摩</span>
                </el-card>
                <el-card
                  style="margin-left: 5px;  margin-top: 7px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #eab30d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListaj()">
                  <span style=" line-height: 80px;  font-size: 22px;">按脚</span>
                </el-card>
                <el-card
                  style="margin-left: 5px;  margin-top: 7px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #74ea0d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListxx()">
                  <span style=" line-height: 80px;  font-size: 22px;">小项</span>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-main style="   height: 100%;  margin-right: 10px;  margin-top: 15px;  width: 100%;">
          <div style="   height: 760px;">
            <el-row style="  text-align: center;">
              <el-col v-for="(item,index) in projectList" :span="8">
                <el-button plain
                           style="height: 123px;width: 212px;margin-top: 3px;padding: 0;font-size: 22px;  border: 3px solid #87CEFA;"
                           type="primary" @click="xz(item)">
                  <div>{{ item.entryName }}</div>
                  <div>{{ item.unitPrice }}元</div>
                </el-button>
              </el-col>
            </el-row>
          </div>
          <el-dialog :title="title" :visible.sync="open" width="50%" style="margin-top: 200px;" append-to-body>
            <div
              style="display: flex;  flex-direction: row;  justify-content: space-between;  flex-wrap: wrap;  height: 100%;">
              <el-input

                style="width: 195px;margin-top: 10px;font-size: 20px; "

                :disabled="true"
                v-model="this.handBrand">
              </el-input>
              <el-input

                style="width: 195px;margin-top: 10px;font-size: 20px; "

                :disabled="true"
                v-model="this.recordEmployeeNumber">
              </el-input>
              <el-input

                style="width: 195px;margin-top: 10px;font-size: 20px; "

                :disabled="true"
                v-model="this.seat">
              </el-input>
            </div>
            <div
              style="display: flex;  flex-direction: row;  justify-content: space-between;  flex-wrap: wrap;  height: 100%;">
              <el-button type="primary" plain @click="click1()"
                         style="margin-top: 20px;    width: 200px;    height: 80px;    font-size: 30px;"> 输入手牌号
              </el-button>
              <el-button type="success" plain @click="click2()"
                         style="margin-top: 20px;    width: 200px;    height: 80px;    font-size: 30px;"> 输入员工号
              </el-button>
              <el-button type="warning" plain @click="click3()"
                         style="margin-top: 20px;    width: 200px;    height: 80px;    font-size: 30px;"> 输入位置
              </el-button>
            </div>
            <div
              style="display: flex;  flex-direction: row;  justify-content: space-between;  flex-wrap: wrap;  height: 100%;">
              <el-button @click="clicksma()" type="info"
                         style="margin-top: 20px;    width: 200px;    height: 80px;    font-size: 30px;">点小号
              </el-button>
              <el-button type="info"  @click="clickbig()"
                         style="margin-top: 20px;    width: 200px;    height: 80px;    font-size: 30px;">点大号
              </el-button>
              <el-button type="info"  @click="clickzero()"
                         style="margin-top: 20px;    width: 200px;    height: 80px;    font-size: 30px;">排队上
              </el-button>
            </div>
            <div style="display: flex;  flex-direction: row;  justify-content: space-between;  flex-wrap: wrap;  height: 100%;">

              <el-input
                type="textarea"
                :rows="1"
                resize="none"
                style="width: 195px;margin-top: 20px;font-size: 40px;margin-left: 4px; "
                :disabled="true"
                v-model="this.qbzs">
              </el-input>
              <el-button type="danger" plain style="margin-top: 20px;    width: 200px;    height: 80px;    font-size: 30px;"
                         @click="submitForm">完成录入
              </el-button>
            </div>
          </el-dialog>
          <el-dialog  :visible.sync="centerDialogVisible1" width="90%" :showClose="false" center>
            <el-card >
              <div style="height: 83vh;overflow: auto;">
                <Verify1 @comfirm="luru1" :inputName="this.handBrand"></Verify1>
              </div>
            </el-card>
          </el-dialog>
          <el-dialog  :visible.sync="centerDialogVisible2" width="90% " :showClose="false" center>
            <el-card >
              <div style="height: 90vh;overflow: auto;">
                <Verify2 @comfirm="luru2" :inputName="this.recordEmployeeNumber "></Verify2>
              </div>
            </el-card>
          </el-dialog>
          <el-dialog  :visible.sync="centerDialogVisible3" width="90%" :showClose="false" center>
            <el-card >
              <div style="height: 90vh;overflow: auto;">
                <Verify3 @comfirm="luru3" :inputName="this.seat"></Verify3>
              </div>
            </el-card>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import {addDetails1, addDetails2} from "@/api/module/yzx/details";
import {listProject} from "@/api/module/yzx/project";
import {listBills} from "@/api/module/yzx/bills";
import Verify1 from "./Verify1.vue";
import Verify2 from "./Verify2.vue";
import Verify3 from "./Verify3.vue";

export default {
  name: "shangzhong",
  dicts: ['yqg_hand_category', 'yqg_hand_state', 'yqg_payment_method', 'yqg_consumption_status', 'yqg_retention_status', 'yqg_project_category', 'yqg_post', 'yqg_check_out_status', 'yqg_department', 'yqg_merge_status', 'yqg_sailings_signs', 'yqg_next_clock_status'],
  components: {
    Verify1,
    Verify2,
    Verify3
  },
  data() {
    return {
      handBrand: '',
      recordEmployeeNumber: '',
      seat: '',
      centerDialogVisible1: false,
      centerDialogVisible2: false,
      centerDialogVisible3: false,
      qb: '0',
      qbzs:'',
      info: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消费详细表格数据
      detailsList: [],
      // 项目信息表格数据
      projectList: [],
      projectList1: [],
      billsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        entryName: null,
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        entryName: null,
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      batai: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: 1,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
    if(this.qb=="0"){
      this.qbzs="排队上"
    }
  },
  methods: {
    click1() {
      this.centerDialogVisible1 = true;

    },
    click2() {
      this.centerDialogVisible2 = true;

    },
    click3() {
      this.centerDialogVisible3 = true;
    },
    clicksma() {
      this.qb = "1";
      if(this.qb=="1"){
        this.qbzs="点小号"
      }
      this.$modal.msgSuccess("点小钟");
    },
    clickbig() {
      this.qb = "2";
      if(this.qb=="2"){
        this.qbzs="点大号"
      }
      this.$modal.msgSuccess("点大钟");
    },
    clickzero() {
      this.qb = "0";
      if(this.qb=="0"){
        this.qbzs="排队上"
      }
      this.$modal.msgSuccess("排队上钟");
    },
    luru1(k) {
      this.handBrand = k;
      this.getbataiList1();
      this.centerDialogVisible1 = false;
    },
    luru2(k) {
      this.recordEmployeeNumber = k;
      this.centerDialogVisible2 = false;
    },
    luru3(k) {
      this.seat = k;
      this.centerDialogVisible3 = false;
    },
    back() {
      this.$router.push({path: "/jishi/index"});
    },
    xz(row) {
      this.form.projectCode = row.projectCode;
      this.queryParams2.projectCode = row.projectCode;
      listProject(this.queryParams2).then(response => {
        this.projectList1 = response.rows;
        this.projectList1.forEach(item => {
          this.form.entryName = item.entryName;
          this.form.unitPrice = item.unitPrice;
          this.form.projectCategory = item.firstLevelClassification;
        })
      });
    },
    /** 查询消费详细列表 */
    getList() {
      this.loading = true;
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "04";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    /** 查询吧台账单列表 */
    getbataiList1() {
      this.loading = true;
      this.resetbatai();
      this.batai.handBrand=this.handBrand
      listBills(this.batai).then(response => {
        this.billsList = response.rows;
        if(this.billsList.length==0){
          this.$modal.msgError("该手牌不在台");
        }else if(this.billsList[0].mergeStatus=="0"){
          this.$modal.msgError("该手牌已被并牌");
        }
        this.total = response.total;
        this.loading = false;
      });
    },

    getListam() {
      this.loading = true;
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "04";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getListaj() {
      this.loading = true;
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "05";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getListxx() {
      this.loading = true;
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "07";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    clear() {
      this.recordEmployeeNumber='';
      this.handBrand='';
      this.seat='';
      this.reset();
      this.reset1();
      this.qb = "0"
    },

    reset1() {
      // 表单重置
      this.projectList1 = null;
    },
    reset() {
      this.form = {
        ID: null,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 查询吧台表的参数
    resetbatai() {
      this.batai = {
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: 1,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      }},

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加消费详细";
    },
    sz() {
      if (this.qb == "0") {
        this.sz1();
      } else {
        this.sz2();
      }
    },

    sz1() {
      if ((this.form.projectCode != null) && (this.seat != '') && (this.handBrand != '') && (this.recordEmployeeNumber != '')) {
        /*      this.$modal.confirm('是否确认上钟？')
                .then(() => {*/
        this.form.recordEmployeeNumber = this.recordEmployeeNumber;
        this.form.handBrand = this.handBrand;
        this.form.seat = this.seat;
        addDetails1(this.form).then(response => {
          this.$modal.msgSuccess("上钟成功");
        });
        this.$router.push({path: "/jishi/index"});
        /* })
         .catch(() => {
         });*/
      } else {
        this.$message({
          type: 'error',
          message: '请先选择项目,录入信息!'
        });
      }
    },
    sz2() {
      if ((this.form.projectCode != null) && (this.seat != '') && (this.handBrand != '') && (this.recordEmployeeNumber != '')) {
        /*      this.$modal.confirm('是否确认上钟？')
                .then(() => {*/
        this.form.recordEmployeeNumber = this.recordEmployeeNumber;
        this.form.handBrand = this.handBrand;
        this.form.seat = this.seat;
        this.form.note1 = this.qb;
        addDetails2(this.form).then(response => {
          this.$modal.msgSuccess("上钟成功");
        });
        this.$router.push({path: "/jishi/index"});
        /* })
         .catch(() => {
         });*/
      } else {
        this.$message({
          type: 'error',
          message: '请先选择项目,录入信息!'
        });
      }
    },
    submitForm() {
      this.open = false;
    },
  }
};
</script>

